<!-- 学社 - 学社主页 -->
<template>
  <view>
    <z-paging-list ref="list" v-model="state.list" :safe-area-inset-bottom="false" @loadData="loadData"
      :hide-empty-view="state.tabCurrentId == 3 || state.tabCurrentId == 4">
      <u-navbar title="" back-icon-color="#000" title-color="#333" title-bold :background="navBackground"
        :border-bottom="false" :isBack="false">
        <view class="flex-1 flex items-center">
          <view class="flex-shrink-0 w-60 pl-2" @click="onBackHome">
            <u-icon name="nav-back" size="44" />
          </view>
          <view class="flex-1 flex items-center justify-center" :style="{ paddingLeft: `${navTitlePadding}px` }"
            @click="state.showSocietyPop = !state.showSocietyPop">
            <view class="society-name c-#333 text-34 text-single">{{ state.societyDetail?.club_name }}</view>
            <u-icon :name="state.showSocietyPop ? 'arrow-up-fill' : 'arrow-down-fill'" color="#333" size="20" />
          </view>
        </view>
      </u-navbar>
      <!-- 数据面板 -->
      <view class="relative w-full h-320">
        <image class="w-full h-full absolute" src="/static/images/home/bg_index_bottom.png" />
        <view class="absolute w-full h-full z-2">
          <u-badge v-if="state.numInfo && state.numInfo.question_read > 0" type="error" class="badge"
            :count="state.numInfo.question_read" />
          <view class="btn-answer absolute top-32 right-32"
            @click.stop="navigate(`/package_society/pages/trend/qa?club_id=${state.club_id}&member_position=${state.member_position}`)">
            问 答
          </view>
          <template v-if="state.targetData">
            <view @click="toPlan">
              <view class="text-center c-white text-3xl font-bold mt-4">{{
                state.targetData?.annual_target ? parseFloat(state.targetData?.annual_target).toFixed(2) : 0 }}W</view>
              <view class="text-center c-white text-28 opacity- mb-4">{{
                state.targetData?.percent > 100 ? '年度目标已完成！' : `年度目标（${state.targetData?.currency ? '美元' : '元'}） ` }}
              </view>
              <view class="px-4 mb-2">
                <view v-if="state.targetData?.percent > 100" class="flex justify-end absolute right-32 top-130">
                  <view class="marker-label px-2 flex items-center">
                    <image class="w-26 h-24 mr-1" src="/static/images/common/ic_like_finger.jpg" />
                    <view>超{{ Number(state.targetData?.percent - 100).toFixed(2) }}%</view>
                  </view>
                </view>

                <u-line-progress :active-color="activeColor" height="12" :inactive-color="inactiveColor"
                  :percent="percent" :show-percent="false"></u-line-progress>
                <view class="text-center c-white text-28">{{ state.targetData?.percent }}%</view>
              </view>
              <view class="flex justify-between items-center px-8 c-white text-24">
                <view>现已完成金额：{{ state.targetData?.finish_money ? parseFloat(state.targetData?.finish_money).toFixed(2) : 0
                }}W（{{ state.targetData?.currency ? '美元' : '元' }}）</view>
                <view>{{ nowData }}</view>
              </view>
            </view>

          </template>
          <template v-else>
            <view class="flex flex-col justify-center items-center mt-8" @click="toPlan">
              <image class="relative w-120 h-120" src="/static/images/common/img_plan_add.jpg" />
              <view class="relative mt-4 c-#fff text-28">添加年度目标</view>
            </view>
          </template>
        </view>
      </view>
      <!-- 操作栏 -->
      <view class="option-card h-134 grid grid-cols-3">
        <!-- 跳转传参: 学社id和学社身份 -->
        <view v-for="(item, index) in topOptionList" :key="index" class="flex flex-col justify-center items-center"
          @click="navigate(`${item.url}?club_id=${state.club_id}&member_position=${state.member_position}`)">
          <u-image width="40" height="40" mode="aspectFit" :src="item.icon"></u-image>
          <view class="c-#717887 text-24 mt-1">{{ item.title }}</view>
        </view>
      </view>
      <!-- 必做事件 -->
      <view class="option-card h-172 mt-3 flex">
        <swiper class="swiper-wrap option-card pl-5 pr-3 w-full h-172" circular :autoplay="false"
          :current="state.currentIndex" @change="onSwiperChange">
          <swiper-item class="flex" v-for="(month, index) in state.monthList" :key="index">
            <view class="relative flex items-center mr-6">
              <u-image width="84" height="100" src="/static/images/home/img_must.png"></u-image>
              <u-image class="absolute z-2 bottom-48" width="32" height="52"
                src="/package_society/static/images/ic_prev.png" @click="onPrevPage"></u-image>
            </view>
            <template v-if="month.event.length > 0">
              <view class="h-100 overflow-y-scroll my-auto flex-1" @click="toPlan">
                <view v-for="(item, index) in month.event" :key="index" class="flex items-center h-34 text-single"
                  :class="index == 1 ? 'items-start' : ''">
                  <view class="c-#666 text-24 w-288 text-single mr-2">{{ item.content }}</view>
                  <view :class="['btn-status', onthEventFilter(item.status, 'color')]">{{ onthEventFilter(item.status,
                    'label') }}
                  </view>
                </view>
              </view>
            </template>
            <template v-else>
              <view class="h-full flex-1 flex justify-center items-center" @click="toPlan">
                <u-image width="160" height="160" src="/package_society/static/images/ic_empty_event.png"></u-image>
              </view>
            </template>
            <view class="flex-shirk-0 flex flex-col items-end mr-5">
              <view class="c-#999 text-24 mt-3 mb-2">{{ month.month }}月</view>
              <u-image width="32" height="52" src="/static/images/home/ic_next.png" @click="onNextPage"></u-image>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <!-- 标签栏 -->
      <u-tabs :list="state.societyIdentityTabs" v-model="state.tabCurrent" font-size="32" active-color="#F4AF22"
        :offset="[8, 0]" inactive-color="#999" bar-width="30" gutter="20" :active-item-style="tabActiveStyle"
        @change="onTabChange">
      </u-tabs>
      <!-- 动态 -->
      <template v-if="state.tabCurrentId == 0">
        <society-trend v-for="(item, index) in state.list" :key="index" :data="item"
          :member_position="state.member_position" @refresh="refreshCurrentPage" />
      </template>
      <!-- 答疑 -->
      <template v-if="state.tabCurrentId == 1">
        <!-- 答疑二级tab栏 -->
        <view class="flex mx-14 mt-5 mb-1 h-48 bg-#f6f6f6 border-12 rounded-md">
          <view v-for="(item, index) in qaTabList" :key="index" :class="[state.qaTabCurrent == index ? 'tab-active' : '']"
            class="flex-1 leading-6 text-center c-#999 text-28" @click="onQaTabChange(index)">
            {{ item.label }}
          </view>
        </view>
        <society-qa v-for="(item, index) in state.list" :key="index" :data="item" :club_id="state.club_id"
          :member_position="state.member_position" @refresh="refreshCurrentPage" />
      </template>
      <!-- 私董会 -->
      <template v-if="state.tabCurrentId == 2">
        <society-service ref="serviceRef" :club_id="state.club_id" :member_position="state.member_position"
          :creater-info="state.createrInfo" @refresh="loadUnreadNumber" />
      </template>
      <!-- 课程 -->
      <template v-if="state.tabCurrentId == 3">
        <view v-if="state.list.length == 0" class="flex flex-col items-center mt-14">
          <view class="mb-3 text-24 c-#999">暂无认领课程</view>
          <view v-if="state.member_position >= 2"
            class="w-526 h-68 bg-#F4AF22 rounded-md flex justify-center items-center c-#fff text-28 mx-auto"
            @click="navigate(`/package_society/pages/course/select?club_id=${state.club_id}&type=course`)">
            前去认领
          </view>
        </view>
        <view v-else>
          <view v-if="state.member_position >= 2" class="btn-course"
            @click="navigate(`/package_society/pages/course/select?club_id=${state.club_id}&type=course`)">
            <image class="w-28 h-28" src="/static/images/home/ic_course_add.png" />
            <view class="ml-1">认领课程</view>
          </view>
          <society-course v-for="(item, index) in state.list" :key="index" :data="item" />
        </view>
      </template>
      <!-- 学习成长 -->
      <template v-if="state.tabCurrentId == 4">
        <view v-if="state.list.length == 0" class="flex flex-col items-center mt-14">
          <view class="mb-3 text-24 c-#999">暂无学习成长</view>
          <view v-if="state.member_position >= 2"
            class="w-362 h-68 bg-#F4AF22 rounded-md flex justify-center items-center c-#fff text-28 mx-auto"
            @click="navigate(`/package_society/pages/work/add?club_id=${state.club_id}`)">
            添加
          </view>
        </view>
        <view v-else>
          <society-work v-for="(item, index) in state.list" :key="index" :data="item" :club_id="state.club_id"
            :member_position="state.member_position" @refresh="refreshCurrentPage" />
        </view>
      </template>
      <!-- 成员 -->
      <template v-if="state.tabCurrentId == 5">
        <society-member :club_id="state.club_id" :member_position="state.member_position" @refresh="loadUnreadNumber" />
      </template>
    </z-paging-list>
    <!-- 发布动态按钮 -->
    <view v-if="state.tabCurrentId == 0" class="fixed right-20 bottom-284 z-99">
      <u-image width="136" height="136" src="/static/images/home/img_publish.png"
        @click="navigate(`/package_society/pages/trend/add?club_id=${state.club_id}`)"></u-image>
    </view>
    <!-- 发布工作按钮 -->
    <view v-if="state.tabCurrentId == 4 && state.member_position >= 2" class="fixed right-40 bottom-284 z-99">
      <u-image width="136" height="136" src="/static/images/home/ic_work_publish.jpg"
        @click="navigate(`/package_society/pages/work/add?club_id=${state.club_id}`)"></u-image>
    </view>
    <!-- 学社切换弹窗 -->
    <society-pop :show="state.showSocietyPop" :club_id="state.club_id" @switch="onSwitchSociety"
      @close="state.showSocietyPop = false" />
    <!-- 通用提示弹窗 -->
    <u-modal v-if="state.societyDetail" v-model="state.modalConfig.showTipModal" :show-title="false" border-radius="12"
      :show-confirm-button="false">
      <view class="slot-content">
        <view class="flex justify-center c-#333 text-32 font-bold">温馨提示</view>
        <view @click="state.modalConfig.showTipModal = false"
          class="absolute top-0 right-17 w-166 h-166 flex justify-end">
          <image class="mt-3 mr-2 w-22 h-22" src="/static/images/home/ic_delete.png" />
        </view>

        <view class="text-center c-#333 text-sm my-10">
          {{ state.modalConfig.desc }}
        </view>
        <view class="flex items-center justify-center">
          <view v-if="state.modalConfig.showCloseBtn" class="btn-save mx-3"
            @click="state.modalConfig.showTipModal = false">知道了</view>
          <!-- 不再提醒按钮 -->
          <!-- <view v-if="state.modalConfig.showNoRemindBtn" class="btn-save mx-3" @click="onNoRemind">不再提醒</view> -->
          <view v-if="state.modalConfig.showJumpBtn" class="btn-save mx-3"
            @click="onTipModalConfrim(state.modalConfig.jumpUrl)">{{ state.modalConfig.btnName }}
          </view>
        </view>
      </view>
    </u-modal>
    <!-- 顾问编辑提示弹窗 -->
    <u-modal v-if="state.societyDetail" v-model="state.adviserModalConfig.showAdviserModal" :show-title="false"
      border-radius="12" :show-confirm-button="false">
      <view class="slot-content">
        <view class="flex justify-center c-#333 text-32 font-bold">温馨提示</view>
        <view @click="state.adviserModalConfig.showAdviserModal = false"
          class="absolute top-0 right-17 w-166 h-166 flex justify-end">
          <image class="mt-3 mr-2 w-22 h-22" src="/static/images/home/ic_delete.png" />
        </view>

        <view class="text-center c-#333 text-sm my-10">
          优化【顾问】资料，让您的成员快速了解他们
        </view>
        <view class="flex items-center justify-center">
          <!-- 不再提醒按钮 -->
          <view class="btn-save mx-3" @click="onNoRemind">不再提醒</view>
          <view class="btn-save mx-3" @click="onAdviserModalConfrim(state.adviserModalConfig.jumpUrl)">去编辑
          </view>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script setup>
import { navigate, showToast, redirectTo, switchTab } from "@/common/util/uni";
import { onthEventFilter } from '@/common/util/util'
import { societyTabList, topOptionList, qaTabList } from '@/common/constant/society.js'
import dayjs from 'dayjs'
import societyTrend from '@/package_society/components/society/trend'
import societyQa from '@/package_society/components/society/qa'
import societyMember from '@/package_society/components/society/member'
import societyCourse from '@/package_society/components/society/course'
import societyService from '@/package_society/components/society/service'
import societyWork from '@/package_society/components/society/work'
import { getSocietyDetail, getDynamicLists, getMemberAuditNum, getQuestionLists, getSocietyWelcome, postSocietyNomoreRemind, postSocietyInvite, getMySociety, getUnreadNumber, getSocietyClaimList, getWorkLists } from '@/common/http/module/society.js'
import { getTargetDetail, getMonthEvents } from '@/common/http/module/plan'
import { useUserStore } from '@/store/user'
import { usePlanStore } from '@/store/plan';

const planStore = usePlanStore()
const userStore = useUserStore()

const activeColor = computed(() => {
  if (state.targetData.percent > 100) {
    return '#F8DC61'
  } else {
    return '#fff'
  }
})

const inactiveColor = computed(() => {
  if (state.targetData.percent > 100) {
    return '#F8DC61'
  } else {
    return '#e9d5b1'
  }
})

const percent = computed(() => {
  if (state.targetData.percent > 100) {
    return '85'
  } else {
    return state.targetData.percent
  }
})
const list = ref();
const state = reactive({
  numInfo: [],//未读消息数量
  sceneArray: [], // 扫码进入
  tabId: 0, // 其他页面传的tab id
  societyDetail: null, // 学社详情
  targetData: null, // 年度规划详情
  societyData: [], // 我的学社列表
  createrInfo: null, // 社长信息
  club_id: '', // 学社id
  member_position: '', // 当前用户在该学社身份
  percent: 80, // 百分比0
  currentIndex: 0, // 必做事件轮播图当前index
  tabCurrent: 0,
  tabCurrentId: 0,
  qaTabCurrent: 0,
  showSocietyPop: false,
  monthList: [], // 必做事件月数及数据
  thingList: [1, 2, 3, 4, 5], // 每月事件列表
  list: [],
  societyIdentityTabs: [], // 学社权限tab栏
  modalConfig: {
    desc: '', // 提示内容
    showTipModal: false, // 提示弹窗
    showCloseBtn: false,
    showJumpBtn: false,
    // showNoRemindBtn: false,
    btnName: '', // 按钮名称,
    jumpUrl: ''
  },
  adviserModalConfig: {
    showAdviserModal: false,
    jumpUrl: ''
  }
});

const serviceRef = ref()

const tabActiveStyle = {
  color: '#333333'
}

const navBackground = {
  // background: 'url(/static/images/home/bg_index_top.png) no-repeat',
  backgroundImage: 'linear-gradient(45deg, rgb(198, 159, 79), rgb(235, 198, 135))',
  backgroundSize: 'cover',
}

const nowData = computed(() => {
  return dayjs(new Date()).format('MM/DD')
})

const menuInfo = uni.getMenuButtonBoundingClientRect()
const sysInfo = uni.getSystemInfoSync()
const navTitlePadding = sysInfo.windowWidth - menuInfo.left - uni.upx2px(40)

watch(() => userStore.userInfo, (val) => {
  if (val) {
    refreshAll()
    refresh()
  }
})

// 获取我的学社
function loadMySociety() {
  if (userStore.isLogin) {
    getMySociety().then(res => {
      state.societyData = res.data
    })
  }
}

// 每月必做事件跳转年规
function toPlan() {
  const matchSociety = state.societyData.find(v => v.club_id == state.club_id)
  userStore.changeSociety(matchSociety)
  planStore.changeYear(new Date().getFullYear())
  uni.switchTab({
    url: '/pages/plan/index'
  });
}

// 扫码进来的点击返回回到首页
function onBackHome() {
  // if (state.sceneArray.length == 0) {
  //   uni.navigateBack()
  // } else {
  uni.switchTab({
    url: '/pages/index/index'
  });
  // }
}

function onSwiperChange(e) {
  state.currentIndex = e.detail.current
}

// 标签栏切换事件
function onTabChange(index) {
  state.tabCurrent = index
  // 用来显示对应tab组件
  state.tabCurrentId = state.societyIdentityTabs[index].id
  refresh()
}

// 答疑tab切换
function onQaTabChange(i) {
  state.qaTabCurrent = i
  loadData
  refresh()
}

// 切换上一月必做事件
function onPrevPage() {
  state.currentIndex > 0 ? state.currentIndex-- : state.currentIndex = state.monthList.length - 1
}

// 切换下一月必做事件
function onNextPage() {
  state.currentIndex < state.monthList.length - 1 ? state.currentIndex++ : state.currentIndex = 0
}

async function loadUnreadNumber() {
  const { data } = await getUnreadNumber(state.club_id)
  state.numInfo = data
  state.societyIdentityTabs.forEach(v => {
    if (v.id === 0) {
      v.count = state.numInfo.dynamic_notice
    }
    if (v.id === 5) {
      v.count = state.numInfo.audit_member
    }
    if (v.id === 2) {
      v.count = state.numInfo.service_read
    }
  })
}


function onSwitchSociety(society) {
  console.log('onSwitchSociety', society);
  state.club_id = society.club_id
  // 操作栏初始化
  state.tabId = 0
  state.tabCurrentId = state.societyIdentityTabs[0]?.id
  refreshAll()
  refresh()
  state.showSocietyPop = false
}

// 通用弹窗按钮事件
function onTipModalConfrim(jumpUrl) {
  navigate(jumpUrl)
  state.modalConfig.showTipModal = false
}


function onAdviserModalConfrim(jumpUrl) {
  navigate(jumpUrl)
  state.adviserModalConfig.showAdviserModal = false
}

// 不再提醒
function onNoRemind() {
  postSocietyNomoreRemind(state.club_id).then(() => {
    state.adviserModalConfig.showAdviserModal = false
    showToast('设置成功')
  })
}


// 刷新所有数据
function refreshAll() {
  loadDetail()
  loadTargetData()
  loadMonthEvents()
  loadData;
  // loadMemberAuditNum()
  loadMySociety()
  loadUnreadNumber()
}

function refresh() {
  list.value.onRefresh()
}

// 刷新当前页
function refreshCurrentPage() {
  list.value.onRefreshCurrentPage()
}

// 学社详情
function loadDetail() {
  getSocietyDetail(state.club_id).then((res) => {
    state.societyDetail = res.data;
    state.createrInfo = res.data.creator
    state.member_position = res.data.member_position
    state.societyIdentityTabs = societyTabList.filter(v => state.member_position >= v.auth)
    state.tabCurrent = state.societyIdentityTabs.findIndex(v => v.id == state.tabId) ?? 0
    if (!res.data.is_join) {
      showToast(state.sceneArray.length > 0 ? '邀请码失效' : '未加入学社', 'none')
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/index/index'
        });
      }, 2000)
      return
    }
    // 社长欢迎弹窗
    if (res.data.create_pop) {
      const isEditIntro = res.data.club_introduce != ''
      state.modalConfig = {
        showTipModal: true,
        desc: isEditIntro ? `
          欢迎来到【八零学社】！
          您的专属学社已经创建成功，
          注：学社成员的加入，需要您的邀请或者审核通过才能进入哦~
        ` : '您的学社已经正式搭建成功，请赋予学社一段优质的介绍吧',
        showCloseBtn: isEditIntro,
        showJumpBtn: !isEditIntro,
        btnName: '前往编辑',
        jumpUrl: `/package_society/pages/society/edit?club_id=${state.societyDetail.id}`
      }
    }
    // 非社长欢迎弹窗
    loadSocietyWelcome()
    // 社长每天首次进入学社编辑顾问提示弹窗
    if (res.data.counselor_edit_pop) {
      state.adviserModalConfig = {
        showAdviserModal: true,
        jumpUrl: `/package_society/pages/society/edit?club_id=${state.societyDetail.id}`
      }
    }
  });
}

// 年度规划
function loadTargetData() {
  getTargetDetail(state.club_id).then(res => {
    state.targetData = res.data
  })
}

// 每月必做事件
function loadMonthEvents() {
  getMonthEvents(state.club_id).then(res => {
    state.monthList = res.data
  })
}

async function loadSocietyWelcome() {
  const { data } = await getSocietyWelcome(state.club_id)
  if (data.is_pop) {
    state.modalConfig = {
      showTipModal: true,
      desc: `@${data.nickname} ${data.content}`,
      showCloseBtn: true,
    }
  }
}

function loadData(page) {

  if (state.tabCurrentId == 5 || state.tabCurrentId == 2) return
  const tabPostList = [
    { tabCurrentId: 0, postMethod: getDynamicLists },
    { tabCurrentId: 1, postMethod: getQuestionLists },
    { tabCurrentId: 3, postMethod: getSocietyClaimList },
    { tabCurrentId: 4, postMethod: getWorkLists },
  ]
  const matchTab = tabPostList.find(v => v.tabCurrentId == state.tabCurrentId)
  matchTab.postMethod(state.club_id, page, state.qaTabCurrent).then(res => {
    list.value.onLoadResult(page ? res.data?.data : []);
  })
}

onShow(() => {
  loadUnreadNumber()
  serviceRef.value?.loadData()
  // refreshCurrentPage()
})

onLoad((options) => {
  var pages = getCurrentPages()
  console.log("kkkkk", pages.length)
  // 获取识别小程序的scene值
  try {
    const { query } = wx.getEnterOptionsSync()
    if (query && query.scene) {
      const scene = decodeURIComponent(query.scene)
      state.sceneArray = scene.split("_")
    }
  } catch (e) {
    console.log(e);
  }
  state.currentIndex = dayjs(new Date()).month()
  state.tabId = options?.tabId || state.sceneArray[state.sceneArray.length - 1] || 0
  state.tabCurrentId = options?.tabId || state.sceneArray[state.sceneArray.length - 1] || 0
  state.club_id = options.club_id || state.sceneArray[3]
  console.log('邀请', state.sceneArray);
  if (pages.length == 1) {
    // 扫码社长/管理员二维码调用加入学社接口 若二维码失效则重定向到首页
    if (state.sceneArray[0] == 1 && state.sceneArray[2]) {
      postSocietyInvite({ club_id: state.club_id, invite_code: state.sceneArray[2] }).then(res => {
        console.log('邀请', res.data.result);
        showToast(res.data.msg, 'none')
        if (!res.data.result) {
          setTimeout(() => {
            navigate(`/package_society/pages/society/detail?id=${state.club_id}`)
          }, 2000)
        }
      })
    }
  }
  refreshAll()

});

defineExpose({ refresh, refreshCurrentPage })
</script>

<style lang="scss" scoped>
.slot-content {
  position: relative;
  padding: 24rpx 40rpx 40rpx;
}

.btn-save {
  width: 100%;
  height: 68rpx;
  line-height: 68rpx;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  border-radius: 10rpx;
  background-color: #F4AF22;
}

.society-name {
  max-width: 300rpx;
  margin-left: -44rpx;
}

.btn-answer {
  width: 120rpx;
  height: 40rpx;
  border-radius: 2px;
  border: 1px solid #FFFFFF;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
  line-height: 40rpx;
}

.option-card {
  border-radius: 0px 0px 6px 6px;
  background-color: #FFFFFF;
  box-shadow: -16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}

.btn-status {
  width: 100rpx;
  height: 30rpx;
  font-size: 20rpx;
  text-align: center;
  line-height: 30rpx;
}

.btn-success {
  background-color: rgba(64, 179, 83, .1);
  color: #40B353;
}

.btn-fail {
  background-color: rgba(255, 81, 58, .1);
  color: #FF513A;
}

.btn-audit {
  background-color: rgba(244, 175, 34, .1);
  color: #F4AF22;
}

.tab-active {
  background: linear-gradient(-76.14deg, rgba(248, 220, 97, 1) 0%, rgba(244, 174, 32, 1) 100%);
  border: 1px solid #FFFFFF;
  border-radius: 12rpx;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.3);
  color: #fff;
  font-weight: bold;
}

.btn-course {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 240rpx;
  height: 64rpx;
  margin: 56rpx auto 0;
  border-radius: 10rpx;
  border: 1px solid #F4AF22;
  color: #F4AF22;
  font-size: 28rpx;
}

.marker-label {
  position: relative;
  font-size: 24rpx;
  border-radius: 8rpx;
  font-weight: 500;
  background: #F8DC61;
  border: 1px solid #F8DC61;
  color: #FF513A;
  text-align: center;
  line-height: 22px;

  &::before {
    position: absolute;
    left: 50%;
    top: 22px;
    transform: translate(-50%, 0);
    z-index: 3;
    border-top: 6px solid #F8DC61;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    /* box-sizing: content-box; */
    width: 0;
    height: 0;
  }

  &::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 23px;
    transform: translate(-50%, 0);
    z-index: 2;
    border-top: 6px solid #F8DC61;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    width: 0;
    height: 0;
  }
}
</style>
